<template>
    <div class="w-table" style="height: calc(100% - 70px)">
        <el-table
            :data="tableData"
            style="width: 100%"
            :height="isShowPagination ? 'calc(100% - 44px)' : '100%'"
            :header-cell-style="headerCellStyle"
            @select="selectChange"
            @select-all="selectAllChange"
            @row-click="rowClick"
            @row-dblclick="rowDblclick"
            :border="isShowborder"
            v-loading="loading"
            ref="tableRef"
            row-key="id"
            default-expand-all
            :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
        >
            <el-table-column type="selection" width="55" fixed v-if="isShowSelect" :selectable="selectable" />
            <el-table-column type="index" :index="(index) => index + 1" label="序号" width="75" />
            <el-table-column
                v-for="item in tableConfig.length ? tableConfig : propTableConfig"
                :prop="item.prop"
                :label="item.label"
                :min-width="item.minWidth"
                :fixed="item.fixed"
                :width="item.width"
                :show-overflow-tooltip="item.isShowTooltip"
            >
                <template #default="scope" v-if="item.slotName">
                    <slot :name="item.slotName" :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination" v-if="total !== -1 && isShowPagination">
            <el-pagination layout="sizes, prev, pager, next, jumper, ->, total" :total="total" small @current-change="currentChange" @size-change="sizeChange" />
        </div>
    </div>
</template>

<script setup>
import { ref, inject, reactive, onUnmounted, isRef, computed } from "vue";
import emitter from "@/bus";
const emits = defineEmits(["rowClick", "rowDblclick", "selectChange"]);
const props = defineProps({
    isShowPagination: {
        type: Boolean,
        default: true
    },
    propTableConfig: {
        type: Array,
        default: () => []
    },
    propFormData: {
        type: Object,
        default: () => ({})
    },
    selectable: {
        type: Function,
        default: () => {
            return true;
        }
    }
});
const tableData = ref([]);
const tableRef = ref(null);
const loading = ref(false);
const total = ref(-1);
const tableConfig = inject("tableConfig", []);
const apiFn = isRef(inject("apiFn", () => {})) ? inject("apiFn", () => {}).value : inject("apiFn", () => {});
const formData = Object.keys(inject("formData", {})).length ? inject("formData", {}) : props.propFormData;
const requestBody = isRef(inject("requestBody", {})) ? inject("requestBody", {}).value : inject("requestBody", {});
const includeName = inject("includeName", []);
const isShowSelect = inject("isShowSelect", true);
const isShowborder = inject("isShowBorder", false);
let allSelectTable = [];
const pagination = reactive({ pageNum: 1, pageSize: 10 });
const requestData = computed(() => {
    if (Object.keys(requestBody).length) {
        return {
            [requestBody]: {
                ...formData,
                ...pagination
            }
        };
    } else {
        return {
            ...formData,
            ...pagination
        };
    }
});
if (tableConfig.length) getTableList();

async function getTableList(callBack) {
    loading.value = true;
    const cpy = { ...requestData.value };
    if (Object.keys(requestBody).length) {
        delete cpy[requestBody].time;
        includeName.forEach((item) => {
            if (!cpy[requestBody][item]) cpy[requestBody][item] = 0;
        });
    } else {
        delete cpy.time;
        includeName.forEach((item) => {
            if (!cpy[item]) cpy[item] = 0;
        });
    }
    const res = await apiFn(cpy).catch(() => (loading.value = false));
    loading.value = false;
    if (res.code === 200) {
        if (res.data.list) {
            tableData.value = res.data.list;
            total.value = res.data.total;
        } else {
            tableData.value = res.data;
        }
        if (callBack) callBack(tableData.value);
    }
}
function search() {
    getTableList();
}
emitter.on("search", search);
const selectChange = (value) => {
    allSelectTable[pagination.pageNum - 1] = value;
    emits("selectChange", allSelectTable);
};
const selectAllChange = (value) => {
    allSelectTable[pagination.pageNum - 1] = value;
    emits("selectChange", allSelectTable);
};
const currentChange = async (pageNum) => {
    pagination.pageNum = pageNum;
    await getTableList();
    allSelectTable[pagination.pageNum - 1]?.forEach((row) => {
        const find = tableData.value.find((item) => item.id === row.id);
        tableRef.value.toggleRowSelection(find, true);
    });
};
const sizeChange = (pageSize) => {
    console.log(1);
    pagination.pageSize = pageSize;
    getTableList();
};
const rowClick = (row, column, event) => {
    emits("rowClick", row, column, event);
};
const rowDblclick = (row, column, event) => {
    emits("rowDblclick", row, column, event);
};
const headerCellStyle = () => ({ color: "#8C8C8C", fontWeight: 400 });

onUnmounted(() => {
    emitter.off("search", search);
});
defineExpose({
    allSelectTable,
    getTableList,
    tableData,
    tableRef
});
</script>

<style lang="less" scoped>
.w-table {
    box-sizing: border-box;
    padding: 0 0 15px 0;
    box-sizing: border-box;
    :deep(.el-table__inner-wrapper) {
        height: 100% !important;
    }
    .pagination {
        display: flex;
        justify-content: flex-end;
        margin-top: 20px;
    }
}
</style>
